<template>
  <div>
    <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
    <a-modal
      :footer="false"
      :visible="props.visible"
      title="知识库详情"
      width="100%"
      wrap-class-name="full-modal"
      @ok="handleOk"
      @update:visible="updateVisible"
      @close="updateVisible(false)"
    >

      <a-layout style="height: 100; width: 100%;">
        <a-layout-sider class="siderStyle">
          <a-menu v-model:selectedKeys="selectedKeys" mode="vertical" class="menu-style" @click="handleMenuClick">
            <a-menu-item
              v-for="(item) in menuItems"
              :key="item.key"
              :title="item.title"
              :icon="item.icon"
              :label="item.label"
            >
            {{item.label}}
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout-content :style="contentStyle">
          <div v-if="selectedKeys[0] === 'document'">
            <a-input v-model:value="searchText" placeholder="请输入文档名称，回车搜索" class="search-title" @pressEnter="reload" />
            <a-row :span="24" class="knowledge-row">
              <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
                <a-card class="add-knowledge-card" :bodyStyle="cardBodyStyle">
                  <span style="line-height: 18px; font-weight: 500; color: #676f83; font-size: 12px">创建文档</span>
                  <div class="add-knowledge-doc" @click="handleCreateText">
                    <form-outlined :style="{fontSize: '13px'}" />
                    <span>手动录入</span>
                  </div>
                  <div class="add-knowledge-doc" @click="handleCreateUpload">

                    <cloud-upload-outlined :style="{fontSize: '13px'}"/>
                    <span>文件上传</span>

                    
                  </div>
                  <div class="add-knowledge-doc" @click="handleCreateUploadLibrary">
                    <a-upload
                      accept=".zip"
                      name="file"
                      :data="{ knowId: knowledgeId }"
                      :showUploadList="false"
                      :headers="headers"
                      :beforeUpload="beforeUpload"
                      :action="uploadUrl"
                      @change="handleUploadChange"
                    >
                      <project-outlined style="margin-left: 0;font-size: 12px;" />
                      <span style="font-size: 12px">文档库上传</span>
                    </a-upload>
                  </div>
                  <div class="knowledge-btn">
                    <a-dropdown placement="bottomRight" :trigger="['click']">
                      <!-- <p>· · ·</p> -->
                      <!-- <ellipsis-outlined /> -->
                    
                      <div class="ant-dropdown-link pointer model-icon" @click.prevent.stop>
                        <ellipsis-outlined :style="{fontSize: '16px'}"  />
                      </div>
                      <template #overlay>
                        <a-menu>
                          <!-- <a-menu-item>xxxx</a-menu-item> -->
                          <a-menu-item key="vectorization" @click="handleClearDoc">
                            <retweet-outlined :style="{fontSize: '16px'}" />
                            清空文档
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </div>

                  
                </a-card>
              </a-col>
              <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in knowledgeDocDataList">
                <a-card class="knowledge-card pointer" @click="handleEdit(item)">
                  <div class="knowledge-header">
                    <div class="header-text flex">
                      <file-text-outlined v-if="item.type === 'text'" :style="{fontSize: '32px', color:'#00a7d0'}" />
                      <file-markdown-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === 'md' " :style="{fontSize: '32px', color:'#292929'}" />
                      <file-pdf-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === 'pdf' " :style="{fontSize: '32px', color:'rgb(211, 47, 47)'}" />
                      <file-word-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === 'docx' " :style="{fontSize: '32px', color:'rgb(68, 138, 255)'}" />
                      <file-ppt-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === 'pptx' " :style="{fontSize: '32px', color:'rgb(245, 124, 0)'}" />
                      <file-excel-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === 'xlsx' " :style="{fontSize: '32px', color:'rgb(98, 187, 55)'}" />
                      <file-text-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === 'txt' " :style="{fontSize: '32px', color:'#00a7d0'}" />
                      <file-text-outlined v-if="item.type === 'file' && getFileSuffix(item.metadata) === '' " :style="{fontSize: '32px', color:'#f5f5dc'}" />
                      <span class="ellipsis header-title">{{ item.title }}</span>
                    </div>
                  </div>
                  <div class="card-description">
                    <span>{{ item.content }}</span>
                  </div>
                  <div class="flex" style="justify-content: space-between">
                    <div class="card-text">
                      状态：
                      <div v-if="item.status === 'complete'" class="card-text-status">
                        <check-circle-outlined :style="{fontSize: '16px', color:'#56D1A7'}" />
                        <span class="ml-2">已完成</span>
                      </div>
                      <div v-else-if="item.status === 'building'" class="card-text-status">
                        <a-spin v-if="item.loading" :spinning="item.loading" :indicator="indicator" />
                        <span class="ml-2">构建中</span>
                      </div>
                      <div v-else-if="item.status === 'draft'" class="card-text-status">
                        <img src="../icon/draft.png" style="width: 16px; height: 16px" />
                        <span class="ml-2">草稿</span>
                      </div>
                    </div>
                    <a-dropdown placement="bottomRight" :trigger="['click']">
                      <div class="ant-dropdown-link pointer operation" @click.prevent.stop>
                        <ellipsis-outlined size="16" />
                      </div>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item key="vectorization" @click="handleVectorization(item.id)">
                            <retweet-outlined size="16" />
                            向量化
                          </a-menu-item>
                          <a-menu-item key="edit" @click="handleEdit(item)">
                            <edit-outlined size="16" />
                            编辑
                          </a-menu-item>
                          <a-menu-item key="delete" @click="handleDelete(item.id)">
                            <delete-outlined  size="16" />
                            删除
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </div>
                </a-card>
              </a-col>
            </a-row>
            <Pagination
              v-if="knowledgeDocDataList.length > 0"
              :current="pageNo"
              :page-size="pageSize"
              :page-size-options="pageSizeOptions"
              :total="total"
              :showQuickJumper="true"
              :showSizeChanger="true"
              @change="handlePageChange"
              class="list-footer"
              size="small"
            />
          </div>
          <div v-if="selectedKeys[0] === 'hitTest'" style="padding: 16px">
            <a-spin :spinning="spinning">
              <div class="hit-test">
                <h4>命中测试</h4>
                <span>针对用户提问调试段落匹配情况，保障回答效果。</span>
              </div>
              <div class="content">
                <div class="content-title">
                  <Avatar v-if="hitShowSearchText" :size="35" :src="avatar" />
                  <span>{{ hitShowSearchText }}</span>
                </div>
                <div class="content-card">
                  <a-row :span="24" class="knowledge-row" v-if="hitTextList.length>0">
                    <a-col :xxl="6" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in hitTextList">
                      <a-card class="hit-card pointer" style="border-color: #ffffff" @click="hitTextDescClick(item)">
                        <div class="card-title">
                          <div style="display: flex;">
                            <Icon icon="ant-design:appstore-outlined" size="14"></Icon>
                            <!-- <appstore-outlined /> -->
                            <span style="margin-left: 4px">Chunk-{{item.chunk}}</span>
                            <span style="margin-left: 10px">{{ item.content.length }} 字符</span>
                          </div>
                          <a-tag class="card-title-tag" color="#a9c8ff">
                            <span>{{ getTagTxt(item.score) }}</span>
                          </a-tag>
                        </div>
                        <div class="card-description">
                          {{ item.content }}
                        </div>
                        <div class="card-footer">
                          {{item.docName}}
                        </div>
                      </a-card>
                    </a-col>
                  </a-row>
                  <div v-else-if="notHit">
                    <a-empty :image-style="{ margin: '0 auto', height: '160px', verticalAlign: 'middle', borderStyle: 'none' }">
                      <template #description>
                        <div style="margin-top: 26px; font-size: 20px; color: #000; text-align: center !important">
                          没有命中的分段
                        </div>
                      </template>
                    </a-empty>
                  </div>
                </div>
              </div>
              <div class="param">
                <span style="font-weight: bold; font-size: 16px">参数配置</span>
                <ul>
                  <li>
                    <span>条数：</span>
                    <a-input-number :min="1" v-model:value="topNumber"></a-input-number>
                  </li>
                  <li>
                    <span>Score阈值：</span>
                    <a-input-number :min="0" :step="0.01" :max="1" v-model:value="similarity"></a-input-number>
                  </li>
                </ul>
              </div>
              <div class="hit-test-footer">
                <a-input v-model:value="hitText" size="large" placeholder="请输入" style="width: 100%" @pressEnter="hitTestClick">
                  <template #suffix>
                    <!-- <Icon icon="ant-design:send-outlined" style="transform: rotate(-33deg); cursor: pointer" rotate="33" size="22" @click="hitTestClick"></Icon> -->
                    <send-outlined style="transform: rotate(-33deg); cursor: pointer" size="22" @click="hitTestClick" />
                    <!-- <send-outlined /> -->
                  </template>
                </a-input>
              </div>
            </a-spin>

          </div>
        </a-layout-content>
      </a-layout>
    </a-modal>
    <AiragKnowledgeDocTextModal v-model:visible="addEditVisible" :isUpdate="isUpdate" :create-by="createBy" :docData="docData" v-if="addEditVisible" @done="reload()"/>

  </div>


</template>
<script lang="ts" setup>
import { update, value } from 'lodash-es';
import { onMounted, ref, defineProps, defineEmits,h } from 'vue';
import { KnowledgeApi } from '../api/KnowledgeApi';
import { clear } from 'xe-utils';
import {Modal, message,Avatar, Pagination } from 'ant-design-vue';
import { LoadingOutlined } from '@ant-design/icons-vue';
import AiragKnowledgeDocTextModal from './AiragKnowledgeDocTextModal.vue';


//当前页数
const pageNo = ref<number>(1);

const selectedKeys = ref(['document']); // 默认选中的菜单项
const selectedKey = ref<string>('document'); // 当前选中的菜单项
const searchText = ref<string>(''); // 查询参数
const knowledgeId = ref<string>(''); // 知识库id
const knowledgeDocDataList = ref<any>([]); // 知识库文档列表
const headers = ref<any>({}); // 请求头
const uploadUrl = ref<string>(''); // 上传地址
const Page = ref<number>(1); // 当前页码
const pageSize = ref<number>(10); // 每页条数
const total = ref<number>(0); // 总条数
const pageSizeOptions = ref<any>(['10','20','30']); // 每页条数选项
const timer = ref<any>(null); // 定时任务刷新列表
const addEditVisible = ref<boolean>(false); // 新增编辑文档弹窗

const isUpdate = ref(false); // 弹窗是新增还是编辑
const createBy = ref<string>('text'); // 新增方式


const docData = ref<any>({
  content: '',
  createBy: '',
  createBy_dictText: '',
  createTime: '',
  id: '',
  knowledgeId: knowledgeId,
  metadata: '',
  status: '',
  sysOrgCode: '',
  tenantId: null,
  title: '',
  type: '',
  updateBy: '',
  updateTime: '',
}); // 文档数据


//定向显示的文本
const hitShowSearchText = ref<string>('');

//定向搜索的文本
const hitText = ref<string>('');

//定向返回结果集
const hitTextList = ref<any>([]);

//是否没有命中
const notHit = ref<boolean>(false);

//条数
const topNumber = ref<number>(5);

//最小分数 0-1
const similarity = ref<number>(0.65);

//用户头像
const avatar = ref<any>('');

//加载效果
const spinning = ref<boolean>(false);


// 菜单项
const menuItems = ref<any>([
  {
    key: 'document',
    icon: '',
    label: '文档',
    title: '文档'
  },
  {
    key: 'hitTest',
    icon: '',
    label: '命中测试',
    title: '命中测试'
  }
]);

function handleMenuClick() {
  // console.log(selectedKeys.value);
}

function handleCreateText() {

  // console.log('handleCreateText');

  docData.value = {
  content: '',
  createBy: '',
  createBy_dictText: '',
  createTime: '',
  id: '',
  knowledgeId: props.knowledgeId,
  metadata: '',
  status: '',
  sysOrgCode: '',
  tenantId: null,
  title: '',
  type: '',
  updateBy: '',
  updateTime: '',
};

  isUpdate.value = false;
  createBy.value = 'text'; 
  addEditVisible.value = true;

}

function handleCreateUpload() {
  console.log('handleCreateUpload');
  docData.value = {
  content: '',
  createBy: '',
  createBy_dictText: '',
  createTime: '',
  id: '',
  knowledgeId: props.knowledgeId,
  metadata: '',
  status: '',
  sysOrgCode: '',
  tenantId: null,
  title: '',
  type: '',
  updateBy: '',
  updateTime: '',
};


  isUpdate.value = false;
  createBy.value = 'upload'; 
  addEditVisible.value = true;
}

function handleCreateUploadLibrary() {
  console.log('handleCreateUploadLibrary');
}

function beforeUpload() {
  console.log('beforeUpload');
}

function handleUploadChange() {
  console.log('handleUploadChange');
}

const handleEdit = value => {
  // console.log('handleEdit', value);
  docData.value = value;
  // console.log('docData', docData.value.title);



  isUpdate.value = true;
  addEditVisible.value = true;

}

function handleClearDoc() {
  console.log('handleClearDoc');
}


function hitTextDescClick(item) {
  console.log('hitTextDescClick', item);
}


function getTagTxt(score) {
  console.log('getTagTxt', score);
}

/**
 * 分页改变事件
 * @param page
 * @param current
 */
 function handlePageChange(page, current) {
  pageNo.value = page;
  pageSize.value = current;
  reload();
}

/**
 * 获取文件后缀
 */
function getFileSuffix(metadata) {
  if(metadata){
    let filePath = JSON.parse(metadata).filePath;
    const index = filePath.lastIndexOf('.');
    return index > 0 ? filePath.substring(index + 1).toLowerCase() : '';
  }
  return '';
}

// function indicator() {
//   console.log('indicator');
// }


/**
 * 加载指示符
 */
const indicator =  h(LoadingOutlined, {
  style: {
    fontSize: '16px',
    marginRight: '2px'
  },
  spin: true,
});

async function handleVectorization(value) {
  // console.log('handleVectorization', value);

  await KnowledgeApi.knowledgeRebuildDoc({ docIds: value }).then(res => {
    // console.log('rebuildDoc', res);
    if (res) {
      message.success('操作成功');
    } else {
      message.error(res);
    }
  }
).catch(err => {
  console.log('rebuildDoc err', err);
});
}

function handleDelete(value) {
  // console.log('handleDelete', value);
  Modal.confirm({
    title: '提示',
    content: `确认要删除该文档吗？`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      KnowledgeApi.knowledgeDeleteBatchDoc({ ids: value }).then(res => {
        if (res.success) {
          reload();
          message.success('删除成功');
        } else {
          message.error(res.message);
        }
      });
    }
  });
}

function hitTestClick() {
  if (hitText.value) {
    spinning.value = true;
    KnowledgeApi.knowledgeEmbeddingHitTest({
      queryText: hitText.value,
      knowId: knowledgeId.value,
      topNumber: topNumber.value,
      similarity: similarity.value,
    }).then((res) => {
      if (res.success) {
        if (res.data) {
          hitTextList.value = res.data;
        } else {
          hitTextList.value = [];
        }
      }
      hitShowSearchText.value = hitText.value;
      avatar.value = userStore.getUserInfo.avatar ? getFileAccessHttpUrl(userStore.getUserInfo.avatar) : defaultImg;
      hitText.value = '';
      notHit.value = hitTextList.value.length == 0;
      spinning.value = false;
    }).catch(()=>{
      spinning.value = false;
    });
  }
  console.log('hitTestClick');
  if (hitText.value) {
    spinning.value = true;
    KnowledgeApi.knowledgeEmbeddingHitTest({
      queryText: hitText.value,
      knowId: String(props.knowledgeId),
      topNumber: topNumber.value,
      similarity: similarity.value,
    }).then(res => {
      if (res.success) {
        console.log('hitTest', res);
        if (res.result) {
          hitTextList.value = res.result;
        } else {
          hitTextList.value = [];
        }
      }
      hitShowSearchText.value = hitText.value;
      hitText.value = '';
      notHit.value = hitTextList.value.length == 0;
      spinning.value = false;
  }).catch(()=>{
            spinning.value = false;
          });
        }
}



onMounted(() => {
  reload();
});

async function reload() {
  // console.log('reload');
  let params = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    knowledgeId: props.knowledgeId,
    title: '*' + searchText.value + '*',
    column: 'createTime',
    order: 'desc'
  };
  await KnowledgeApi.knowledgeDocList(params).then((res) => {
    // console.log(res);
    if (res.success) {
      if (res.data.records){
        // console.log('res.data.records',res.data.records);
        let clearTimer = true;
        for (const item of res.data.records) {
          if (item.status && item.status === 'building') {
            clearTimer = false;
            item.loading = true;
          } else {
            item.loading = false;
          }
          if (clearTimer) {
            clearInterval(timer.value);
          }
        }

      }
      knowledgeDocDataList.value = res.data.records;
      total.value = Number(res.data.total);
      // console.log('total', res.data.total);
      // console.log('konwledgeDocDataList', knowledgeDocDataList.value);
    } else {
      knowledgeDocDataList.value = [];
      total.value = 0;
    }
  })

}



const contentStyle = {
  textAlign: 'center',
  height: '100%',
  width: '80%',
  background: '#ffffff'
};

const cardBodyStyle = {
  textAlign: 'left',
  width: '100%'
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  knowledgeId: {
    type: String,
    default: ''
  }
});
const emits = defineEmits(['update:visible']);

const updateVisible = value => {
  emits('update:visible', value);
};

const handleOk = (e: MouseEvent) => {
  // console.log(e);
  updateVisible(false);
};
</script>
<style lang="less">

.siderStyle {
  text-align: center;
  width: 20%;
  background: #ffffff;
  border-right: 1px solid #cecece
};

.menu-style {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    padding: 0;
  }
  .ant-momal-footer {
    display: none;
  }
}
</style>

<style scoped lang="less">
.pointer {
  cursor: pointer;
}

.knowledge-btn {
  position: absolute;
  right: 4px;
  bottom: 6px;
  height: auto;
  display: none;
}

.hit-test {
  box-sizing: border-box;
  flex-wrap: wrap;
  text-align: left;
  display: flex;
  margin-bottom: 10px;

  h4 {
    font-weight: bold;
    font-size: 16px;
    align-self: center;
    margin-bottom: 0;
    color: #1f2329;
  }

  span {
    margin-left: 10px;
    color: #8f959e;
    font-weight: 400;
    align-self: center;
    margin-top: 2px;
  }
}

.hit-test-footer {
  margin-top: 10px;
  display: flex;
}
.param {
  text-align: left;
  margin-top: 10px;
  ul {
    margin-top: 10px;
    display: flex;
    li {
      align-items: center;
      margin-right: 10px;
      display: flex;
    }
  }
  border-bottom: 1px solid #cec6c6;
}
.content {
  height: calc(100vh - 300px);
  padding: 8px;
  border-radius: 10px;
  background-color: #f9fbfd;
  overflow-y: auto;
  .content-title {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin-left: 10px;
    display: flex;
    span {
      margin-left: 4px;
      font-size: 20px;
      align-self: center;
    }
  }
  .content-card {
    margin-top: 20px;
    margin-left: 10px;
    .hit-card {
      height: 160px;
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 10px;
      background: #fcfcfd;
      border: 1px solid #f0f0f0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      .card-title {
        justify-content: space-between;
        color: #887a8b;
        font-size: 14px;
        display: flex;
      }
    }
  }
}
.hit-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}
.pointer {
  cursor: pointer;
}

.card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  height: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  margin-top: 16px;
  text-align: left;
  font-size: 12px;
  color: #676f83;
}

.card-title-tag {
  color: #477dee;
}

.knowledge-row {
  padding: 16px;
  overflow-y: auto;
  // width: 200px;
  // margin-top: 10px;
  // display: block;
  // margin-left: 20px;
}

.add-knowledge-card {
  border-radius: 10px;
  margin-bottom: 20px;
  display: inline-flex;
  font-size: 16px;
  height: 166px;
  width: calc(100% - 20px);
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  .add-knowledge-card-icon {
    padding: 8px;
    margin-right: 12px;
  }
  
}

.add-knowledge-card :hover {
  // box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  .knowledge-btn {
    display: block;
  }
  // box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.knowledge-card {
  border-radius: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  height: 166px;
  background: #fcfcfd;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  .knowledge-header {
    position: relative;
    font-size: 14px;
    height: 20px;
    text-align: left;
    .header-img {
      width: 40px;
      height: 40px;
      margin-right: 12px;
    }
    .header-title {
      font-weight: bold;
      color: #354052;
      margin-left: 4px;
      align-self: center;
    }

    .header-text {
      overflow: hidden;
      position: relative;
      display: flex;
      font-size: 16px;
    }
  }
}

.add-knowledge-card,
.knowledge-card {
  transition: box-shadow 0.3s ease;
}

// .add-knowledge-card:hover,
// .knowledge-card:hover {
//   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
// }

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
  width: calc(100% - 30px);
}

:deep(.ant-card .ant-card-body) {
  padding: 16px;
}

.card-text {
  font-size: 12px;
  display: flex;
  margin-top: 10px;
  align-items: center;
}

.search-title {
  width: 240px;
  margin-top: 10px;
  display: block;
  margin-left: 25px;
}

.operation {
  border: none;
  margin-top: 10px;
  align-items: end;
  display: none !important;
  bottom: 8px;
  right: 4px;
  position: absolute;
}

.model-icon {
  background-color: unset;
  border: none;
  margin-right: 2px;
}
.model-icon:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
}

.knowledge-card:hover {
  .operation {
    display: block !important;
  }
}

.add-knowledge-doc {
  margin-top: 6px;
  color: #6f6f83;
  font-size: 13px;
  width: 100%;
  cursor: pointer;
  display: flex;
  span {
    margin-left: 4px;
    line-height: 28px;
  }
}
.add-knowledge-doc:hover {
  background: #c8ceda33;
}
.operation {
  background-color: unset;
  border: none;
  margin-right: 2px;
}
.operation:hover {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
}
.ant-dropdown-link {
  font-size: 14px;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  align-content: center;
  text-align: center;
}
.card-footer {
  margin-top: 4px;
  font-weight: 400;
  color: #1f2329;
  text-align: left;
  font-size: 12px;
}
.card-text-status {
  display: flex;
  align-items: center;
}
.ml-2 {
  margin-left: 2px;
}
</style>
<style lang="less">
.airag-knowledge-doc .scroll-container {
  padding: 0 !important;
}
</style>
